<template>
	<view class="staff-view">
		<view class="staff-search">
			<view class="staff-search-box">
				<picker :range="roles" mode="selector" @change="bindPicker" range-key="name" :value="roleIndex" class="picker">
					{{roles[roleIndex].name}}
				</picker>
				<input type="text" confirm-type="search" placeholder="输入用户手机号搜索" bindconfirm="goSearch" v-model="keyword" />
				<image src="https://master.jiaju01.com/web/static/icons/ico_search_people@2x.png" @click="goSearch"></image>
			</view>
		</view>
		<view class="staff-type">
			<view class="staff-search-item" :class="[typeIndex == 0 ? 'active':'']" @click="select(0)">
				<view>普通用户</view>
				<text>{{counts.user1}}</text>
			</view>
			<view class="staff-search-item" :class="[typeIndex == 1 ? 'active':'']" @click="select(1)" v-if="userInfo.role_type==3">
				<view>代理商</view>
				<text>{{counts.user2}}</text>
			</view>
			<view class="staff-search-item" :class="[typeIndex == 2 ? 'active':'']" @click="select(2)" v-if="userInfo.role_type==6">
				<view>经销商</view>
				<text>{{counts.user3}}</text>
			</view>
		</view>
		<view v-if="userList.length" class="staff-list">
			<view class="staff-item" v-for="(item,index) in userList" :key="index" @click="userDynamicInfo(item.user_id)">
				<label v-if="typeIndex == 1 && isManage">
					<radio style="padding: 0 10rpx;" :checked="item.checked" @click.stop="selectradio(index)" />
				</label>
				<image :src="item.heard_img?item.heard_img:''" v-if="typeIndex == 0 || typeIndex == 2"></image>
				<image :src="item.user.heard_img?item.user.heard_img:''" v-if="typeIndex == 1"></image>
				<view class="staff-item-info">
					<view class="staff-item-name" v-if="typeIndex == 0 || typeIndex == 2">{{item.nickname}}</view>
					<view class="staff-item-name" v-if="typeIndex == 1">{{item.user.nickname}}</view>
					<view class="staff-item-id">ID:{{item.user_id}} <text v-if="typeIndex == 1 || typeIndex == 2">提点：{{item.royalty}}%</text></view>
					<view class="staff-item-tag">
						<text>电话:{{item.phone}}</text>
					</view>
				</view>
				<view>
					<view class="phonecall" @click.stop="callHim(item.phone)">联系TA</view>
					<view class="view-record">浏览记录</view>
				</view>
			</view>
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-if="userList.length > 5" />
		</view>
		<!-- <pt-loading v-if="isLoading"></pt-loading>
		<pt-loading-more></pt-loading-more> -->
		
		<pt-nothing
			text="暂无数据" 
			:fixed="true" 
			v-if="noData"
			top="280"
			icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
		</pt-nothing>

		<view class="staff-bottom" v-if="typeIndex == 1">
			<view class="add-btn" @click="goAddStaff" v-if="!isManage">添加代理商</view>
			<view class="manage-btn" @click="manage" v-if="!isManage">管理代理商</view>
			<view v-if="isManage" @click="delStaff" class="del">删除</view>
			<view v-if="isManage" @click="complate" class="orange">完成</view>
		</view>
		<pt-loading></pt-loading>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				userInfo: '',
				isManage: false,
				keyword: '',
				roleIndex: 0,
				roles: [],
				noData: false,
				showLoad: true,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				typeIndex: 0,
				userList: [],
				counts: {
					user1: 0,
					user2: 0,
					user3: 0
				},
				page1: 0,
				page2: 0,
				page3: 0,
				noMore: false,
				isLoading: false
			};
		},
		onLoad(options) {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			this.getUserList()
			if(this.userInfo.role_type!=3){
				this.roles = [{
					id: 0,
					name: '普通用户'
				}]
			}
			if(this.userInfo.role_type==6){
				this.getDealerUserList()
			}
			if(this.userInfo.role_type==3){
				this.init()
				this.roles = [{
					id: 0,
					name: '普通用户'
				}, {
					id: 1,
					name: '分销员'
				}]
			}
		},
		methods: {
			init() {
				let data = {
					limit: 10,
					page: 0,
					order_by: 'add_time',
					asc: 2,
					type: 5
				}
				this.$u.apiWei.StaffLists(data).then(res => {
					if (res.datas.length != 0) {
						this.counts.user2 = res.counts
					}
				})
			},
			getStaffLists() {
				let data = {
					limit: 10,
					page: this.page2,
					order_by: 'add_time',
					asc: 2,
					type: 5
				}
				if (this.keyword) {
					data.keyword = this.keyword
				}
				this.$u.apiWei.StaffLists(data).then(res => {
					res.datas.forEach(item => {
						item.checked = false
						this.userList.push(item)
					})
					this.counts.user2 = res.counts
					if (res.datas.length == 0) this.showLoad = false
					if (this.userList.length == 0) this.noData = true
				})
			},
			getUserList() {
				let userid = JSON.parse(uni.getStorageSync('userInfo')).user_id;
				let data = {
					limit: 10,
					page: this.page1,
					order_by: 'add_time',
					asc: 2,
					belong_refer: userid
				}
				if (this.keyword) {
					data.keyword = this.keyword
				}

				this.$u.apiWei.UserList(data).then(res => {
					res.datas.forEach(item => {
						this.userList.push(item)
					})
					this.counts.user1 = res.counts
					if (res.datas.length == 0) this.showLoad = false
					if (this.userList.length == 0) this.noData = true
				})
			},
			getDealerUserList() {
				let userid = JSON.parse(uni.getStorageSync('userInfo')).user_id;
				let data = {
					limit: 10,
					page: this.page3,
					order_by: 'add_time',
					asc: 2,
					belong_refer: userid,
					role_type: 2
				}
				if (this.keyword) {
					data.keyword = this.keyword
				}
				this.$u.apiWei.UserList(data).then(res => {
					res.datas.forEach(item => {
						this.userList.push(item)
					})
					this.counts.user3 = res.counts
					if (res.datas.length == 0) this.showLoad = false
					if (this.userList.length == 0) this.noData = true
				})
			},
			callHim(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				})
			},
			goAddStaff() {
				uni.navigateTo({
					animationDuration: 500,
					url: '/my/staff/add-staff/add-staff'
				})
			},
			bindPicker(e) {
				this.roleIndex = e.detail.value
			},
			goSearch() {
				this.showLoad = true
				this.typeIndex = this.roleIndex
				this.userList = []
				this.page1 = 0
				this.page2 = 0
				this.noMore = false
				if (this.roleIndex == 0) {
					this.getUserList()
				} else {
					this.getStaffLists()
				}
			},
			manage() {
				this.isManage = true
			},
			complate() {
				this.isManage = false
			},
			delStaff() {
				let arr = []
				this.userList.forEach(item => {
					if (item.checked) {
						arr.push(item.store_admin_id)
					}
				})
				if (arr.length == 0) {
					uni.showToast({
						title: '至少要选择一个',
						icon: 'success',
						duration: 2000
					})
					return
				}
				let data = {
					store_admin_id: arr.join(',')
				}
				this.$u.apiWei.StaffDelate(data).then(res => {
					uni.showToast({
						title: res.datas,
						icon: 'success',
						duration: 2000
					})
					this.isManage = false
					this.counts.user2 = 0
					this.page2 = 0
					this.userList = []
					this.getStaffLists()
				})
			},
			selectradio(index) {
				if (this.userList[index].checked) {
					this.userList[index].checked = false
				} else {
					this.userList[index].checked = true
				}
			},
			select(index) {
				this.page1 = 0
				this.page2 = 0
				this.keyword = ''
				this.showLoad = true
				this.typeIndex = index
				this.userList = []
				this.noData = false
				if (index == 1) {
					this.getStaffLists()
				} else if(index==0){
					this.getUserList()
				}else if(index==2){
					this.getDealerUserList()
				}
			},
			userDynamicInfo(user_id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/my/user-dynamic/user-dynamic-info/user-dynamic-info?type=1&user_id='+user_id
				})
			}
		},
		onReachBottom() {
			this.status = 'loading';
			setTimeout(() => {
				this.status = 'nomore';
			}, 1000)
			if (!this.showLoad) return;
			if (this.typeIndex == 1) {
				this.page2++
				this.getStaffLists()
			} else if(this.typeIndex == 0){
				this.page1++
				this.getUserList()
			} else if(this.typeIndex == 2){
				this.page3++
				this.getDealerUserList()
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F9F9F9;
	}

	.staff-view {
		.staff-list {
			margin-top: 20rpx;
		}

		/* 搜索 */
		.staff-search {
			background-color: #FFF;
			padding: 15rpx 20rpx;
		}

		.staff-search-box {
			height: 78rpx;
			background-color: #F3F3F3;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			padding: 20rpx 0;
		}

		.picker {
			padding: 0 20rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			border-right: solid 1px #B6B6B6;
			margin-right: 20rpx;
		}

		.staff-search-box input {
			flex: 1;
			font-size: 26rpx;
		}

		.staff-search-box image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
			margin-top: -5rpx;
		}


		/* 搜索结束 */

		.staff-list .staff-item {
			display: flex;
			align-items: center;
			border-bottom: solid 1px #EEE;
			background-color: #FFF;
			padding: 35rpx 20rpx;
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background-color: #EEE;
			}
		}

		.staff-item-info {
			flex: 1;
			margin: 0 25rpx;
		}

		.staff-item-name {
			font-size: 30rpx;
		}

		.staff-item-id {
			font-size: 22rpx;
			color: #999;
			margin: 10rpx 0;
			text{
				margin-left: 20rpx;
				color: #FE9B26;
			}
		}

		.staff-item-tag {
			display: inline-block;
			height: 32rpx;
			line-height: 32rpx;
			font-size: 20rpx;
		}

		.phonecall {
			height: 50rpx;
			line-height: 50rpx;
			border: solid 1px #141414;
			color: #FFF;
			background-color: #141414;
			padding: 0 25rpx;
			font-size: 24rpx;
			border-radius: 8rpx;
		}
		
		.view-record{
			height: 50rpx;
			line-height: 50rpx;
			border: solid 1px #141414;
			color: #141414;
			padding: 0 25rpx;
			font-size: 24rpx;
			border-radius: 8rpx;
			margin-top: 20rpx;
		}


		.staff-type {
			display: flex;
			align-items: center;
			background-color: #FFF;
			border-top: solid 1px #EEE;
		}

		.staff-search-item {
			flex: 1;
			text-align: center;
			padding: 30rpx 0;
			position: relative;
		}

		.staff-search-item view {
			color: #999;
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}

		.staff-search-item text {
			font-size: 28rpx;
			color: #999;
		}


		.active::after {
			content: '';
			position: absolute;
			bottom: 10rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 60rpx;
			height: 6rpx;
			border-radius: 6rpx;
			background-color: #141414;
		}

		.active view {
			font-size: 34rpx;
			color: #333;
		}

		.active text {
			font-size: 30rpx;
			color: #333;
		}


		.staff-bottom {
			position: fixed;
			display: flex;
			height: 100rpx;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #FFF;
			align-items: center;
		}

		.staff-bottom view {
			flex: 1;
			font-size: 34rpx;
			text-align: center;
			line-height: 100rpx;
		}

		.add-btn {
			color: #FFF;
			background-color: #FE9B26;
		}

		.del {
			color: #F12D2D;
		}

		.orange {
			color: #FE9B26;
		}
	}
</style>
